<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .load-msg{
            position: absolute;
            left:50%;
            top:50%;
            font-size:40px;
            color:#FFFFFF;
            -webkit-transform: translate3D(-50%,-50%,0);
            transform: translate3D(-50%,-50%,0);
        }
    </style>
</head>
<body style="background:#dbdbdb;">
<span class="load-msg" id="load-msg"></span>
<canvas width="1024" height="768" class="game-bg" id="gameView"></canvas>
</body>
<script src="js/common/flexible.js"></script>
<script src="./js/vendor/createjs-2015.11.26.min.js"></script>
<script src="./js/vendor/tweenjs-0.6.2.min.js"></script>
<script src="./js/vendor/easeljs-0.8.2.min.js"></script>
<script src="./js/vendor/CSSPlugin.js"></script>
<script src="js/common/canvas.js"></script>

<script src="./js/vendor/jquery-2.1.1.min.js"></script>

<script>
    function init() {

    }

    function UnityProgress (dom) {
        this.progress = 0.0;
        this.message = "";
        this.dom = dom;

        createjs.CSSPlugin.install(createjs.Tween);
        createjs.Ticker.setFPS(60);

        var parent = dom.parentNode;

        this.SetProgress = function (progress) {
            if (this.progress < progress)
                this.progress = progress;
            if (progress == 1) {
                this.SetMessage("Preparing...");
                document.getElementById("spinner").style.display = "inherit";
                document.getElementById("bgBar").style.display = "none";
                document.getElementById("progressBar").style.display = "none";
            }
            this.Update();
        }
        this.SetMessage = function (message) {
            this.message = message;
            this.Update();
        }
        this.Clear = function() {
            document.getElementById("loadingBox").style.display = "none";
        }
        this.Update = function() {
            var length = 200 * Math.min(this.progress, 1);
            bar = document.getElementById("progressBar")
            createjs.Tween.removeTweens(bar);
            createjs.Tween.get(bar).to({width: length}, 500, createjs.Ease.sineOut);
            document.getElementById("loadingInfo").innerHTML = this.message;
        }
        this.Update ();
    }
</script>

</html>